<template>
  <div class="app-container">
    <!-- 顶部功能 -->
    <div class="filter-container" style="margin-bottom: 15px">
      <!-- 考试名 -->
      <el-input v-model="queryParam.name" placeholder="考试名" style="width: 200px" class="filter-item" />
      <!-- 一些按钮 -->
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleShowAll">
        显示全部
      </el-button>
    </div>

    <!--弹出框-->
    <el-dialog title="考试信息" :visible.sync="dialogVisible" width="30%">
      <p>考试名称：{{ curExam.name }}</p>
      <p>考试题库：{{ curExam.repoName }}</p>
      <p>单选题（个）：{{ curExam.sigleCount }}</p>
      <p>多选题（个）：{{ curExam.multiCount }}</p>
      <p>判断题（个）：{{ curExam.judgeCount }}</p>
      <p>总数：{{ curExam.questionCount }}</p>
      <p>总分：{{ curExam.totalScore }}</p>
      <p>及格分：{{ curExam.qualifyScore }}</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitStart">确 定</el-button>
      </div>
    </el-dialog>

    <!--数据表格-->
    <el-table ref="multipleTable" :data="tableData" border>

      <el-table-column prop="id" label="序号" align="center" />

      <el-table-column label="考试名" align="center" width="300" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-link type="primary" @click="handleStart(scope.row)">{{
        scope.row.name
      }}</el-link>
        </template>
      </el-table-column>

      <el-table-column prop="repoName" label="所用题库" align="center" />

      <el-table-column prop="questionCount" label="总题数" align="center" />

      <el-table-column prop="sigleCount" label="单选题（个）" align="center" />

      <el-table-column prop="multiCount" label="多选题（个）" align="center" />
      <el-table-column prop="judgeCount" label="判断题（个）" align="center" />

      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="handleStart(scope.row)">开始考试</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页条-->
    <el-pagination background :current-page.sync="queryParam.pageNum" :page-sizes="[5, 10, 20, 50]"
      :page-size="queryParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="recordTotal"
      style="margin-top: 15px" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui'
import waves from '@/directive/waves' // waves directive
import {
  createStudentExam
} from '@/api/student/exam'
import {
  queryPapersByPage
} from '@/api/admin/paper'
export default {
  name: 'ExamList',
  directives: { waves },
  data() {
    return {
      // 表格数据
      tableData: [],
      // 记录总数
      recordTotal: 0,
      // 查询参数
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      },
      // 弹出框显示
      dialogVisible: false,
      // 表单数据
      curExam: {
        id: null,
        name: null,
        repoName: null,
        sigleCount: null,
        judgeCount: null,
        multiCount: null
      },
      // 考试id
      examId: null
    }
  },
  computed: {
    // 通过表单类型计算表单标题
    ...mapGetters(['id', 'name', 'roles', 'avatar']),
    // 表单标题
    formTitle() {
      return this.formType === 0 ? '添加记录' : '修改记录'
    }
  },
  // 创建后
  created() {
    // 从服务器获取数据表格第一页的信息
    // 默认page=1，size=10
    this.queryPage()
  },
  methods: {

    // 查询分页
    queryPage() {
      queryPapersByPage(this.queryParam).then((res) => {
        if (res.status === 200) {
          this.tableData = res.data.rows
          this.recordTotal = res.data.total
        }
      })
    },

    // 分页大小改变监听
    handleSizeChange(curSize) {
      this.queryParam.pageSize = curSize
      this.queryPage()
    },

    // 点击分页监听方法
    handleCurrentChange(curPage) {
      this.queryParam.pageNum = curPage
      this.queryPage()
    },

    // 搜索
    handleFilter() {
      this.queryParam.pageNum = 1
      this.queryPage()
    },

    // 点击显示全部
    handleShowAll() {
      this.queryParam.pageNum = 1
      this.queryParam.name = null
      this.queryPage()
    },

    handleStart(row) {
      this.curExam = row
      this.dialogVisible = true
    },

    submitStart() {
      // 进入考试
      const that = this

      // 打开
      const loading = Loading.service({
        text: '正在努力创建试卷...',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      // 创建学生考试请求
      createStudentExam({ paperId: that.curExam.id }).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '试卷创建成功，即将进入考试！',
            type: 'success'
          })

          setTimeout(() => {
            loading.close()
            that.dialogVisible = false
            that.$router.push({ name: 'RunExam', query: { studentExamId: res.data }})
          }, 1000)
        } else {
          this.$message.error(res.message)
          loading.close()
        }
      }).catch(() => {
        loading.close()
      })
    }
  }
}
</script>

<style scoped></style>
